<template>
  <div class="container">
    <div class="banner">
      <img
        src="http://www.juyike.cn/Public/Home/images/img_con/ygfc.jpg"
        alt="员工风采"
      />
      <h2>员工风采</h2>
    </div>
    <div class="doc">
      <div class="relative">
        <h3 class="title">员工风采</h3>
        <span class="more">查看更多>></span>
      </div>
      <div class="clearfix">
        <a href="" class="video">
          <span></span>
          <img
            src="http://www.juyike.cn/Public/uploads/Staff/606ffc27e1cdd.png"
            alt=""
          /><br />
          聚益科集团13周年专访《初心》
        </a>
        <a href="" class="video">
          <span></span>
          <img
            src="http://www.juyike.cn/Public/uploads/Staff/606ffc27e1cdd.png"
            alt=""
          /><br />
          聚益科集团13周年专访《初心》
        </a>
      </div>
      <h3 class="title">创业年.创业心</h3>
      <h3 class="title">聚说</h3>
    </div>
  </div>
</template>
<script>
import { StaffPresence_list } from '@/api/index.js';
export default {
  data() {
    return {
      enterpricedata:[],
    };
  },
  created() {
    this.getData();
    
  },
  methods: {
     
    // 获取数据
    getData() {
      const data={id:'4774202105191705773'}
      
      StaffPresence_list(data).then(res=> {
            console.log(res.data,'员工风采');
          this.enterpricedata = res.data
      })
      .catch(error=>{
          console.log(error)
      });
    },
    details(type) {
      this.$router.push({ path: "/details", query: { type: type } });
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  width: 78.5%;
  left: 12.5%;
  position: absolute;
  top: 0;
  min-width: 1050px;
  max-width: 1200px;
  box-shadow: 5px 0 5px #f0f0f0;
  font-family: "微软雅黑";
  .banner {
    width: 100%;
    position: relative;
    h2 {
      font-weight: 500;
      color: #fff;
      opacity: 0.7;
      font-size: 42px;
      line-height: 42px;
      position: absolute;
      left: 25px;
      top: 40%;
    }
  }
  .doc {
    padding: 0 0 50px 30px;
    .title {
      border-left: 4px solid #ee020d;
      height: 26px;
      line-height: 26px;
      padding-left: 10px;
      font-size: 22px;
      margin: 40px 0;
    }
    .relative {
      position: relative;
      .more {
        position: absolute;
        right: 60px;
        top: 0px;
        color: #999;
        font-size: 16px;
        cursor: pointer;
      }
      .more:hover {
        color: #aa001b;
      }
    }
    .clearfix {
      display: flow-root;
      .video {
        width: 40%;
        margin-left: 6%;
        margin-bottom: 4%;
        float: left;
        text-align: center;
        font-size: 16px;
        position: relative;
        height: 295px;
        text-decoration: none;
        outline: none;
        color: #333;
        span {
          background: url(http://www.juyike.cn/Public/Home/images/mediaBg.png)
            no-repeat;
          width: 100%;
          position: absolute;
          z-index: 6;
          left: 0;
          top: 0;
          height: 100%;
          background-size: 100%;
        }
        img {
          max-width: 472px;
          margin-bottom: 10px;
          height: 89%;
          width: 100%;
        }
      }
      .video:hover {
        color: #aa001b;
      }
    }
  }
}
</style>
